<!-- 优惠券 骨架屏 -->
<template>
	<view class="list">
		<view class="item skeleton-animate" v-for="value in 4" :key="value"></view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 13rpx;
		margin-top: 24rpx;

		.item {
			display: flex;
			flex-direction: column;
			position: relative;
			height: 112rpx;
			border-radius: 15rpx;
			overflow: hidden;
			
			&::before,
			&::after {
				position: absolute;
				top: 60rpx;
				z-index: 10;
				content: '';
				display: block;
				width: 20rpx;
				height: 20rpx;
				background-color: #FFEAE4;
				border-radius: 50%;
			}

			&::before {
				left: 0;
				transform: translateX(-50%);
			}

			&::after {
				right: 0;
				transform: translateX(50%);
			}
		}
	}
</style>